import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Example from '../../../shared/components/Example';
import Blockquote from '../../../shared/components/Blockquote';
import Card, { CardHeader } from './';
import { ActionOverflow } from '../menus/action-overflow/example';
import * as CardExamples from './base/example';
import * as CardEinsteinExamples from './einstein/example';
import * as CardWrapperExamples from './wrapper/example';
import { getDisplayElementById } from '../../shared/helpers';
import { MobileNotice, MobileBlurb } from '../../shared/doc-text';
import StylingHooksTable from '../../../shared/components/StylingHooksTable';

<div className="lead doc">
  Cards are used to apply a container around a related grouping of information.
</div>

<CodeView exampleOnly>{getDisplayElementById(CardExamples.default)}</CodeView>

## About Cards

To initialize a card, apply the `slds-card` class to an `<article>` element.

### Accessibility

Cards should use an underlying `<article>` element to maintain usability for some screen reader users.

If the card header icon is redundant with the card header text, the assistive text is not needed.

The card heading level should follow the DOM structure of the page. We are using `h2` as the default heading level for examples, but real world use will dictate the correct level based on the surrounding elements.

### Mobile

<MobileBlurb patternSpecificText="cards will have bolded header title text, no top border, and no rounded corners" />

<CodeView frameOnly frameTitle="Example mobile styles for cards">
  {getDisplayElementById(CardExamples.default)}
</CodeView>

## Base Card Structure

A card is made up of 3 sections, a header, a body, and a footer. The header and footer have limitations, but the body section can accommodate any layout of related information.

<CodeView>{getDisplayElementById(CardExamples.default)}</CodeView>

### Header

The card header can have an icon, a title and actions. The icon and title are located on the left, while the actions row is located on the right side of the card header.

<Example title="Cards Header">
  <CodeView>
    <Card>
      <CardHeader
        title="Accounts"
        href="#"
        onClick={e => e.preventDefault()}
        symbol="account"
      />
    </Card>
  </CodeView>
</Example>

#### With no header

The card header can be removed from the HTML to prevent the card header from displaying.

<CodeView>
  {getDisplayElementById(CardExamples.examples, 'with-no-header')}
</CodeView>

Alternatively, the card header can be visually hidden but still accessible to screen readers by applying `slds-assistive-text` to the `slds-card__header` element.

<CodeView>
  {getDisplayElementById(CardExamples.examples, 'visibly-hidden-card-header')}
</CodeView>

#### Actions row

The actions row of a card header typically accommodates a single action for the object a user is working with, such as creating, editing, or deleting. If there are more than one action, an action overflow menu would be used instead.

##### Single action

<Example title="Cards Single Action">
  <CodeView>
    <Card>
      <CardHeader
        title="Accounts"
        href="#"
        onClick={e => e.preventDefault()}
        symbol="account"
        action={
          <button className="slds-button slds-button_neutral">New</button>
        }
      />
    </Card>
  </CodeView>
</Example>

##### Multiple actions

<Example title="Cards Multiple Actions">
  <CodeView demoStyles="height: 10rem;">
    <Card>
      <CardHeader
        title="Accounts"
        href="#"
        onClick={e => e.preventDefault()}
        symbol="account"
        action={<ActionOverflow position="right" />}
      />
    </Card>
  </CodeView>
</Example>

### Body

The card body accommodates any layout or design, as long as its a grouping of related information.

<Blockquote type="note" header="Styling Note">
  <p>
    By default, the body of a card does not have padding. Components inside the
    card will be flush to the left and right edges of the card. If you need to add
    padding, use the <code>slds-card__body_inner</code> class on
    the <code>slds-card__body</code> element.
  </p>
</Blockquote>

#### Default without padding

For an example of when to use the default behavior, see the [Data Table example](/components/cards/#With-a-Data-Table).

<CodeView>
  {getDisplayElementById(CardExamples.examples, 'body-has-no-padding')}
</CodeView>

#### With padding

For an example of when to use the `slds-card__body_inner` class, see the [Tiles example](/components/cards/#With-Tiles).

<CodeView>
  {getDisplayElementById(CardExamples.examples, 'body-has-padding')}
</CodeView>

### Footer

The card footer is optional and should _**only**_ have a "View All" link that takes a user to the object list view.

<Blockquote type="a11y" header="Accessibility Note">
  <p>
    When present, the footer includes hidden assistive text to give screen reader
    users context about which entity they will be viewing.
  </p>
</Blockquote>

<Blockquote type="note" header="Implementation Note">
  <p>
    The examples in this documentation use the <code>slds-card__footer-action</code> class on
    the footer link <code>&lt;a&gt;</code> to force the footer's click target to span the
    entire width of the card. Simply remove this class if not needed.
  </p>
</Blockquote>

#### With no footer

<CodeView>
  {getDisplayElementById(CardExamples.examples, 'has-no-footer')}
</CodeView>

#### With a footer

<CodeView>
  {getDisplayElementById(CardExamples.examples, 'has-footer')}
</CodeView>

## Examples

### Empty

When a card doesn't have any data, it is represented with the body and footer collapsed by default.

#### Collapsed

<CodeView>{getDisplayElementById(CardExamples.states, 'empty')}</CodeView>

#### With Illustration

Alternatively, a card can be represented with no data by using an [illustration](/components/illustration) in the card body.

<CodeView>
  {getDisplayElementById(CardExamples.states, 'empty-illustration')}
</CodeView>

### Loading

When a card instantiates and is loading, we want to provide feedback to the user by display a spinner. Once the data has loaded, the spinner can be removed from the card component.

<CodeView>{getDisplayElementById(CardExamples.states, 'loading')}</CodeView>

### With a Data Table

Placing a data table inside of an `slds-card__body` is an example of when to utilize the default behavior of a card body, since no padding is applied.

<CodeView>
  {getDisplayElementById(CardExamples.examples, 'related-list-table')}
</CodeView>

### With Tiles

Placing contact tiles inside of an `slds-card__body` is an example of using `slds-card__body_inner` to apply additional padding to the card body content.

<CodeView>
  {getDisplayElementById(CardExamples.examples, 'related-list-tiles')}
</CodeView>

<MobileNotice docsLink="#Mobile" header="Mobile context changes" elementName="cards with tiles" />

<CodeView frameOnly frameTitle="Example mobile styles for cards with tiles">{getDisplayElementById(CardExamples.examples, 'related-list-tiles')}</CodeView>

## Layout

### Nested Cards

When a card is located inside of another card body, we remove the drop shadow and border of the nested cards. You can opt into adding the border back by applying `slds-card_boundary` to the `slds-card` element.

#### No styling

<CodeView>
  {getDisplayElementById(CardExamples.examples, 'nested-no-boundary')}
</CodeView>

#### With card styling

Adding `slds-card_boundary` to the `slds-card` element will give you back the card styling.

<CodeView>
  {getDisplayElementById(CardExamples.examples, 'nested-with-boundary')}
</CodeView>

### Wrapped Cards

To combine several cards into a single card look, wrap the cards using `slds-card-wrapper`. Similar to the nested cards, adding `slds-card_boundary` to the `slds-card` element will give you back the card styling.

<CodeView>{getDisplayElementById(CardWrapperExamples.default)}</CodeView>

## Einstein Theming

For cards that contain Einstein related information, you can include an Einstein themed card header.

<CodeView>{getDisplayElementById(CardEinsteinExamples.default)}</CodeView>

### With an Icon

<CodeView>
  {getDisplayElementById(CardEinsteinExamples.states, 'einstein-with-icon')}
</CodeView>

### With Actions

<CodeView>
  {getDisplayElementById(
    CardEinsteinExamples.states,
    'einstein-with-icon-and-actions'
  )}
</CodeView>

<MobileNotice docsLink="#Mobile" header="Mobile context changes" elementName="cards with Einstein theming and actions" />

<CodeView frameOnly frameTitle="Example mobile styles for Einstein themed cards">
  {getDisplayElementById(
    CardEinsteinExamples.states,
    'einstein-with-icon-and-actions'
  )}
</CodeView>

## Styling Hooks Overview

<StylingHooksTable name="cards" type="component" />
